import React, { memo, Suspense, } from 'react';
import { useRoutes } from 'react-router-dom'
import routes from '@/router'
import AppHeader from '@/components/app-header'
import AppFooter from '@/components/app-footer'
import useScrollTop from '@/hooks/useScrollTop'

const App = memo(() => {

  // 监听页面切换，内容回滚到顶部
  /*const location = useLocation()
   useEffect(() => {
   window.scrollTo(0, 0)
   }, [location.pathname]);*/
  // 封装成hook
  useScrollTop()

  return (<div className="app">
      <AppHeader/>
      <Suspense fallback="loading">
        <div className="page">
          { useRoutes(routes) }
        </div>
      </Suspense>
      <AppFooter/>
    </div>);
});

export default App;
